Burger

Saving Screen Space

The hamburger icon is perfect for saving screen space, especially on mobile devices. By hiding the main menu behind this compact symbol, you can keep the interface clean and uncluttered. Users can easily access the full menu when needed, allowing for a more streamlined and focused browsing experience.

Component Overview

The Burger (hamburger menu) in Emvi UI is a compact navigation trigger optimized for mobile and dense interfaces. It toggles the global navigation drawer or an app-wide menu while preserving primary actions on screen. In Emvi UI’s Figma kit (free & premium), the component ships as a tokenized, motion-ready icon with variants for open/closed states, stroke weights, and theme parity, enabling consistent handoff to front-end teams without relying on heavy HTML examples.

Enhancing User Experience

Using a hamburger icon enhances the user experience by simplifying navigation. The recognizable three-line design makes it intuitive for users to find and open the hidden menu. This helps in creating a seamless and user-friendly interface where users can navigate through the site effortlessly, regardless of the device they are using.

Offering Flexible Navigation

The hamburger icon provides flexible navigation options. It can house a variety of menu items and links, making it adaptable to different types of content and site structures. This flexibility allows designers to include more navigation options without overwhelming the user, ensuring that the interface remains efficient and easy to use. Our UI kit includes customizable hamburger icons that integrate smoothly into any design, providing both functionality and style.

Types and Variants

Core variants for product teams:
- Icon Only (3-bar, rounded or squared ends), with/without container.
- With Label (e.g., “Menu”), for discoverability in complex apps.
- Contained / Ghost (filled vs. transparent background for contrast control).
- Motion Variants: morph to “X”, rotate + fade lines, or drawer-coupled progress.
- Placement Variants: top-left, top-right, app bar center (with brand lockup). Design tokens cover size, stroke, gap, and pressed/hover/active states across light/dark themes.

Sizes, Spacing, and Scale

Recommended scales for the icon button: 24 / 32 / 40 px (SM/MD/LG). Maintain ≥44×44 px touch target via container padding, not by thickening strokes. Use 1.5–2 px stroke for legibility on low-density screens. Provide 8–12 px spacing to the app bar edge and keep consistent alignment with logo and primary actions. When paired with a title, maintain a stable baseline to avoid layout jumps when toggling states.

States and Behavior

States include default, hover, focus-visible, pressed, active (open), and disabled. The “open” state should be visually persistent (e.g., morph to “X” or show an active background). Couple the trigger’s state with the navigation drawer: open → drawer visible, close → drawer hidden. Motion guidelines: 150–220 ms for icon morphs, 200–280 ms for drawer slide/fade, easing out-cubic for entry and in-cubic for exit. Respect reduced motion preferences by swapping morphs for opacity/scale changes or static icon swaps.

Integration & Usage

Prioritize primary navigation (e.g., bottom nav) for frequent tasks; use the burger for secondary or overflow areas. Avoid nesting multiple burger triggers. If the app requires quick access to 2–3 top destinations, expose them on the app bar or via tabs and reserve the drawer for the long tail of links, account, and settings. For desktop breakpoints, promote the drawer to a sidebar while preserving the same information architecture to prevent disorientation across devices.

Accessibility

Use a clear text label alongside the icon in Figma specs (e.g., “Open menu”) and hand off as accessible name. Provide a persistent visible focus style and a large hit area. Manage focus when opening the drawer (focus the first interactive element) and when closing (return focus to the trigger). Ensure 4.5:1 contrast for icon/label against the app bar. Announce state change (expanded/collapsed) and prevent scroll bleed behind the drawer for keyboard and screen reader users.

Figma & Tailwind Integration

Figma: component with properties for size (SM/MD/LG), stroke weight, corner style (round/square), label on/off, and state (default/hover/pressed/active). Include motion specs for the bar-to-X morph and drawer transitions. Tokens: nav.burger.size, nav.burger.stroke, nav.burger.bg.active, nav.drawer.overlay. Tailwind: keep implementation flexible—map tokens to utilities without hardcoding HTML in design docs; provide only state names and timing values to ensure faithful builds.

Best Implementation Practices

- Prefer icon + label on first-use or low-familiarity contexts to improve discoverability.
- Keep drawer content scannable: group nav, utilities (search, account), and secondary links.
- Prevent layout shifts: reserve space for active state and keep app bar height constant.
- Avoid ambiguous icons (dots or lines) that don’t map to “menu”.
- For enterprise apps, support keyboard shortcuts and display hints in the drawer header.
- Document cross-breakpoint behavior (burger → tabs/sidebar) to maintain IA consistency.